<template>
  <div class="dog-breeds-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1>狗狗品种</h1>
        <p>发现各种狗狗品种的特点、习性和养护要点</p>
      </div>
    </div>
    
    <!-- 搜索和筛选 -->
    <div class="breeds-filter">
      <input
        type="text"
        class="search-input"
        placeholder="搜索狗狗品种..."
        v-model="searchTerm"
      />
      <div class="filter-options">
        <select v-model="selectedSize" class="filter-select">
          <option value="">所有体型</option>
          <option value="small">小型</option>
          <option value="medium">中型</option>
          <option value="large">大型</option>
        </select>
        <select v-model="selectedEnergy" class="filter-select">
          <option value="">所有活动量</option>
          <option value="low">低</option>
          <option value="medium">中</option>
          <option value="high">高</option>
        </select>
      </div>
    </div>
    
    <!-- 狗狗品种网格 -->
    <div class="dog-breeds-grid">
      <router-link 
        :to="`/breed/${dog.id}`"
        class="dog-card"
        v-for="dog in filteredDogs"
        :key="dog.id"
      >
        <div class="dog-image-container">
          <img :src="dog.imageUrl" :alt="dog.name" class="dog-image" />
          <div class="dog-size-indicator" :class="`size-${dog.size.toLowerCase()}`">
            {{ dog.size }}
          </div>
        </div>
        <div class="dog-details">
          <h3>{{ dog.name }}</h3>
          <p class="dog-origin">原产于 {{ dog.origin }}</p>
          <p class="dog-description">{{ dog.description }}</p>
          <div class="dog-characteristics">
            <div class="characteristic-item">
              <span class="characteristic-label">活动量：</span>
              <div class="activity-level">
                <div 
                  class="activity-dot"
                  v-for="i in 3"
                  :key="i"
                  :class="{ 'active': i <= dog.energyLevel }"
                ></div>
              </div>
            </div>
            <div class="characteristic-item">
              <span class="characteristic-label">友善度：</span>
              <div class="friendliness-level">
                <div 
                  class="friendliness-dot"
                  v-for="i in 3"
                  :key="i"
                  :class="{ 'active': i <= dog.friendliness }"
                ></div>
              </div>
            </div>
          </div>
          <div class="view-details">
            查看详情 →
          </div>
        </div>
      </router-link>
    </div>
    
    <!-- 养护小贴士 -->
    <div class="care-tips">
      <h2>狗狗养护小贴士</h2>
      <div class="tips-container">
        <div class="tip-item">
          <div class="tip-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20ZM12.5 7H11V13L16.25 16.15L17 14.92L12.5 12.25V7Z" fill="currentColor"/>
            </svg>
          </div>
          <div class="tip-content">
            <h3>定期运动</h3>
            <p>根据狗狗品种和年龄，提供适当的运动和活动量</p>
          </div>
        </div>
        <div class="tip-item">
          <div class="tip-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.43 12.98C19.47 12.65 19.5 12.32 19.5 12C19.5 11.68 19.47 11.35 19.43 11.02L21.54 9.37C21.73 9.22 21.78 8.95 21.66 8.73L19.66 5.27C19.54 5.05 19.27 4.96 19.05 5.05L16.56 6.05C16.04 5.66 15.5 5.32 14.87 5.07L14.5 2.42C14.46 2.18 14.25 2 14 2H10C9.75 2 9.54 2.18 9.5 2.42L9.13 5.07C8.5 5.32 7.96 5.66 7.44 6.05L4.95 5.05C4.73 4.96 4.46 5.05 4.34 5.27L2.34 8.73C2.22 8.95 2.27 9.22 2.46 9.37L4.57 11.02C4.53 11.35 4.5 11.68 4.5 12C4.5 12.32 4.53 12.65 4.57 12.98L2.46 14.63C2.27 14.78 2.22 15.05 2.34 15.27L4.34 18.73C4.46 18.95 4.73 19.03 4.95 18.95L7.44 17.94C7.96 18.34 8.5 18.68 9.13 18.93L9.5 21.58C9.54 21.82 9.75 22 10 22H14C14.25 22 14.46 21.82 14.5 21.58L14.87 18.93C15.5 18.68 16.04 18.34 16.56 17.94L19.05 18.95C19.27 19.03 19.54 18.95 19.66 18.73L21.66 15.27C21.78 15.05 21.73 14.78 21.54 14.63L19.43 12.98Z" fill="currentColor"/>
            </svg>
          </div>
          <div class="tip-content">
            <h3>均衡饮食</h3>
            <p>选择适合狗狗品种和年龄的优质狗粮，保持均衡营养</p>
          </div>
        </div>
        <div class="tip-item">
          <div class="tip-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.66 3.99C18.87 3.67 17.97 3.5 17 3.5C15.03 3.5 13.11 4.21 11.6 5.3L5.6 2.34C5.27 2.21 4.91 2.21 4.59 2.34L2.34 4.59C2.21 4.91 2.21 5.27 2.34 5.6L5.3 11.6C4.21 13.11 3.5 15.03 3.5 17C3.5 18.97 4.21 20.89 5.3 22.4L2.34 25.36C2.21 25.69 2.21 26.05 2.34 26.38C2.46 26.71 2.72 26.96 3.05 27.09L5.6 25.56C7.11 26.65 9.03 27.34 11 27.34C12.97 27.34 14.89 26.65 16.4 25.56L22.4 28.5C22.73 28.63 23.09 28.63 23.42 28.5L26.38 25.56C26.51 25.23 26.51 24.87 26.38 24.54L23.42 18.6C24.51 17.09 25.21 15.17 25.21 13.14C25.21 11.11 24.51 9.19 23.42 7.68L26.38 4.72C26.51 4.39 26.51 4.03 26.38 3.7C26.26 3.37 25.99 3.12 25.66 3L23.09 4.53C21.58 3.44 19.66 2.74 17.63 2.74C15.6 2.74 13.68 3.44 12.17 4.53L9.11 1.57C8.78 1.44 8.42 1.44 8.09 1.57L5.03 4.53C3.52 3.44 1.6 2.74 0 2.74" fill="currentColor"/>
            </svg>
          </div>
          <div class="tip-content">
            <h3>定期梳毛</h3>
            <p>根据狗狗毛发类型，定期梳理保持毛发健康和减少掉毛</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 搜索和筛选条件
const searchTerm = ref('')
const selectedSize = ref('')
const selectedEnergy = ref('')

// 狗狗品种数据（模拟数据）
const dogBreeds = ref([
  {
    id: 1,
    name: '金毛寻回犬',
    origin: '英国',
    size: '大型',
    description: '金毛寻回犬是一种友好、可靠、值得信赖的犬种。它们聪明、容易训练，非常适合有孩子的家庭。',
    energyLevel: 3, // 1-3，3表示活动量高
    friendliness: 3, // 1-3，3表示非常友善
    imageUrl: 'https://picsum.photos/id/237/600/400'
  },
  {
    id: 2,
    name: '泰迪犬',
    origin: '法国',
    size: '小型',
    description: '泰迪犬（贵宾犬）是一种聪明、活泼、友好的犬种。它们不掉毛，适合对毛发过敏的家庭。',
    energyLevel: 2,
    friendliness: 3,
    imageUrl: 'https://picsum.photos/id/169/600/400'
  },
  {
    id: 3,
    name: '柯基犬',
    origin: '威尔士',
    size: '小型',
    description: '柯基犬以其短腿和大屁股闻名，性格活泼、聪明、友善。它们非常适合城市生活。',
    energyLevel: 3,
    friendliness: 3,
    imageUrl: 'https://picsum.photos/id/219/600/400'
  },
  {
    id: 4,
    name: '德国牧羊犬',
    origin: '德国',
    size: '大型',
    description: '德国牧羊犬是一种聪明、勇敢、忠诚的犬种。它们常被用作警犬、导盲犬和搜救犬。',
    energyLevel: 3,
    friendliness: 2,
    imageUrl: 'https://picsum.photos/id/1062/600/400'
  },
  {
    id: 5,
    name: '哈士奇',
    origin: '俄罗斯',
    size: '中型',
    description: '哈士奇是一种活泼、友好、有点固执的犬种。它们需要大量运动，非常适合户外活动爱好者。',
    energyLevel: 3,
    friendliness: 2,
    imageUrl: 'https://picsum.photos/id/200/600/400'
  },
  {
    id: 6,
    name: '比熊犬',
    origin: '地中海地区',
    size: '小型',
    description: '比熊犬是一种可爱、活泼、友好的犬种。它们有着卷曲的白色毛发，需要定期美容。',
    energyLevel: 2,
    friendliness: 3,
    imageUrl: 'https://picsum.photos/id/1025/600/400'
  },
  {
    id: 7,
    name: '拉布拉多犬',
    origin: '加拿大',
    size: '大型',
    description: '拉布拉多犬是一种友好、可靠、值得信赖的犬种。它们聪明、容易训练，非常适合家庭饲养。',
    energyLevel: 3,
    friendliness: 3,
    imageUrl: 'https://picsum.photos/id/1025/600/400'
  },
  {
    id: 8,
    name: '萨摩耶',
    origin: '西伯利亚',
    size: '中型',
    description: '萨摩耶以其微笑的表情和浓密的白色毛发闻名。它们性格友好、活泼，喜欢与人互动。',
    energyLevel: 3,
    friendliness: 3,
    imageUrl: 'https://picsum.photos/id/1074/600/400'
  }
])

// 过滤后的狗狗品种
const filteredDogs = computed(() => {
  return dogBreeds.value.filter(dog => {
    // 搜索词过滤
    const matchesSearch = dog.name.toLowerCase().includes(searchTerm.value.toLowerCase()) ||
                          dog.description.toLowerCase().includes(searchTerm.value.toLowerCase())
    
    // 体型过滤
    const matchesSize = !selectedSize.value || dog.size === selectedSize.value
    
    // 活动量过滤
    const matchesEnergy = !selectedEnergy.value
    
    if (selectedEnergy.value === 'low') {
      matchesEnergy = dog.energyLevel <= 1
    } else if (selectedEnergy.value === 'medium') {
      matchesEnergy = dog.energyLevel === 2
    } else if (selectedEnergy.value === 'high') {
      matchesEnergy = dog.energyLevel >= 3
    }
    
    return matchesSearch && matchesSize && matchesEnergy
  })
})
</script>

<style scoped>
/* 全局样式变量 */
:root {
  --primary-color: #4CAF50;
  --primary-hover: #3d8b40;
  --text-primary: #333;
  --text-secondary: #666;
  --white: #ffffff;
  --light-gray: #f5f5f5;
  --border-color: #e0e0e0;
  --radius: 12px;
  --transition: all 0.3s ease;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 页面容器 */
.dog-breeds-container {
  min-height: 100vh;
  background-color: var(--light-gray);
  padding-bottom: 40px;
}

/* 页面头部 */
.page-header {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 40px 20px;
  text-align: center;
  margin-bottom: 30px;
}

.header-content h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.header-content p {
  font-size: 1.2rem;
  opacity: 0.9;
}

/* 搜索和筛选 */
.breeds-filter {
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
}

.search-input {
  flex: 1;
  min-width: 300px;
  padding: 12px 20px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  font-size: 1rem;
  transition: var(--transition);
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.filter-options {
  display: flex;
  gap: 15px;
}

.filter-select {
  padding: 12px 20px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  font-size: 1rem;
  background-color: var(--white);
  cursor: pointer;
  transition: var(--transition);
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* 狗狗品种网格 */
.dog-breeds-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 30px;
}

.dog-card {
  background-color: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.dog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}

.dog-image-container {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.dog-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.dog-card:hover .dog-image {
  transform: scale(1.05);
}

.dog-size-indicator {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.size-small {
  border: 2px solid #ff9800;
}

.size-medium {
  border: 2px solid #2196f3;
}

.size-large {
  border: 2px solid #f44336;
}

.dog-details {
  padding: 25px;
}

.dog-details h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
  color: var(--primary-color);
}

.dog-origin {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 15px;
}

.dog-description {
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.6;
}

.dog-characteristics {
  margin-top: 20px;
}

.characteristic-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.characteristic-label {
  width: 80px;
  font-weight: 600;
  color: var(--text-primary);
}

.activity-level,
.friendliness-level {
  display: flex;
  gap: 8px;
}

.activity-dot,
.friendliness-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #e0e0e0;
  transition: var(--transition);
}

.activity-dot.active,
.friendliness-dot.active {
  background-color: var(--primary-color);
}

/* 养护小贴士 */
.care-tips {
  max-width: 1200px;
  margin: 60px auto 0;
  padding: 0 20px;
}

.care-tips h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
  color: var(--text-primary);
}

.tips-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

.tip-item {
  display: flex;
  background-color: var(--white);
  border-radius: var(--radius);
  padding: 25px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}

.tip-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
}

.tip-icon {
  margin-right: 20px;
  color: var(--primary-color);
  flex-shrink: 0;
}

.tip-content h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.tip-content p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    padding: 30px 20px;
  }
  
  .header-content h1 {
    font-size: 2rem;
  }
  
  .header-content p {
    font-size: 1rem;
  }
  
  .breeds-filter {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input {
    min-width: auto;
  }
  
  .filter-options {
    flex-direction: column;
  }
  
  .dog-breeds-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .tips-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 20px 15px;
  }
  
  .header-content h1 {
    font-size: 1.8rem;
  }
  
  .dog-details {
    padding: 15px;
  }
  
  .dog-details h3 {
    font-size: 1.3rem;
  }
}

/* 查看详情按钮样式 */
.view-details {
  margin-top: 15px;
  text-align: right;
  font-weight: 600;
  color: var(--primary-color);
  font-size: 0.9rem;
  transition: var(--transition);
}

.view-details:hover {
  color: var(--primary-hover);
  transform: translateX(5px);
}
</style>